import React, { Component } from 'react'
import { connect } from 'react-redux'
import styled from 'styled-components'

 class MyCart extends Component {
  render() {
    return (
      <Wrapper>
        { 
         this.props.initCartData.map((item, index) => {
           if (item.isCart) {
            return (
              <div key={index}>
                <img src={item.imgs} />
                <SpanBtn>{item.count}</SpanBtn>
                <SpanBtn onClick={() => this.props.addCart(index)}>+</SpanBtn>
                <SpanBtn onClick={() => this.props.removeCart(index)}>-</SpanBtn>
              </div>
            )
           }
         })
        }
      </Wrapper>
    )
  }
}
const mapState = (state) => {
  return {
    initCartData: state.cart.initCartData
  }
}

const mapActions = (dispatch) => {
  return {
    addCart(index) {
      dispatch({
        type: 'add_cart',
        index
      })
    },
    removeCart(index) {
      dispatch({
        type: 'remove_cart',
        index
      })
    }
  }
}

export default connect(mapState, mapActions)(MyCart)

const SpanBtn = styled.div`
    width: 100px;
    height: 40px;
    text-align:center;
    border-radius: 4px;
    background: #ccc;
    line-height: 40px;
    font-size: 30px;
`;

const Wrapper = styled.div`
 width: 100%;
 img {
   width: 50px;
   height 50px;
 }
`;